<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown预览器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header class="preview-header">
            <h1>Markdown预览器</h1>
            <div class="toolbar">
                <button id="new-doc" class="toolbar-btn">新建文档</button>
                <button id="load-sample" class="toolbar-btn">加载示例</button>
                <button id="toggle-theme" class="toolbar-btn">🌙 暗色模式</button>
            </div>
        </header>

        <div class="editor-container">
            <div class="editor-panel">
                <div class="panel-header">
                    <h3>编辑Markdown</h3>
                </div>
                <textarea id="markdown-input" class="markdown-editor" placeholder="在此输入Markdown文本..."></textarea>
                
                <div class="features-panel">
                    <h4>支持的Markdown功能</h4>
                    <ul class="feature-list">
                        <li>标题 (# ## ###)</li>
                        <li>粗体斜体 (**text** *text*)</li>
                        <li>代码块 (```code```)</li>
                        <li>链接和图片</li>
                        <li>列表（有序/无序）</li>
                    </ul>
                </div>
            </div>

            <div class="preview-panel">
                <div class="panel-header">
                    <h3>实时预览</h3>
                </div>
                <div id="preview-output" class="markdown-preview">
                    <div class="welcome-message">
                        <h2>👋 欢迎使用Markdown预览器</h2>
                        <p>在左侧编辑区域输入Markdown文本，右侧将实时显示渲染后的效果。</p>
                        <p>点击上方的「加载示例」按钮查看支持的Markdown语法示例。</p>
                        <div class="code-example">
                            <p>例如，尝试输入：</p>
                            <pre># 一级标题
## 二级标题

这是<strong>粗体</strong>和<em>斜体</em>文本。

```javascript
function hello() {
    console.log("Hello, Markdown!");
}
```</pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>